<template>
	<view class="register">
	
		<view class="content">
			<!-- 头部logo -->
			<view class="header" @click="ChooseImage()">
				<image :src="imgList[0]"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				
				<view class=" bg-white round " style="display: flex;padding: 15upx;align-items: center;" >
					<view style="padding-left: 20upx;" class="title">账号：</view>
					<input style="margin-left: 20upx;font-size: 25upx;" placeholder="请输入账号" v-model="account"></input>
				</view>
				
				<view class=" bg-white round " style="display: flex;padding: 15upx;align-items: center;margin-top: 20upx;" >
					<view style="padding-left: 20upx;" class="title">密码：</view>
					<input style="margin-left: 20upx;font-size: 25upx;" placeholder="请输入密码" v-model="password" type="password"></input>
				</view>
				
				<view class=" bg-white round " style="display: flex;padding: 15upx;align-items: center;margin-top: 20upx;" >
					<view style="padding-left: 20upx;" class="title">姓名：</view>
					<input style="margin-left: 20upx;font-size: 25upx;" placeholder="请输入姓名" v-model="name"  type="text"></input>
				</view>
				<view v-if="role_index == 1" class=" bg-white round " style="display: flex;padding: 15upx;align-items: center;margin-top: 20upx;" >
					<view style="padding-left: 20upx;" class="title">学号：</view>
					<input style="margin-left: 20upx;font-size: 25upx;" placeholder="请输入学号" v-model="sNumber" type="text"></input>
				</view>
					
					<view class=" bg-white round margin-top" style="display: flex;padding: 15upx;" >
						<view class="title" style="margin-left: 20upx;">角色：</view>
						<picker @change="PickerChange" :value="role_index" :range="picker">
							<view class="picker" style="margin-left: 20upx;">
								{{role_index>-1?picker[role_index]:'选择角色'}}
							</view>
						</picker>
					</view>
					
					
					
				</view>
				
				<wButton 
					text="注 册"
					:rotate="isRotate" 
					@click.native="startReg()"
				></wButton>
			
			<!-- 底部信息 -->
			<view class="footer">
				<text 
					@tap="isShowAgree" 
					class="cuIcon"
					:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
				>同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	
	export default {
		data() {
			return {
				
				imgList:["../../static/logo.png"],//图片选择
				role_index:1,//角色小标
				picker:["教师","学生"],//角色
				//logo图片 base64
				logoImage: '',
				name:'',//用户名
				account:'',//账号
				sNumber:'',//学号
				phoneData:'', // 用户/电话
				password:'', //密码
				showAgree:true, //协议是否选择
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
		},
		methods: {
			isShowAgree(){
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			
			
			//点击登陆
		    startReg() {
				// 登陆验证
				
				var account = _this.account;//账号
				var password = _this.password;//密码
				var name = _this.name;//姓名
				var role  = _this.picker[_this.role_index];//角色
				
				
				if(account == '' || account == null){
					uni.showToast({
						title:"账号不能为空！",
						icon:'none',
						duration:1000
					})
					return;
				}
				
				if(password == '' || password == null){
					uni.showToast({
						title:"密码不能为空！",
						icon:'none',
						duration:1000
					})
					return;
				}
				
				if(name == '' || name == null){
					uni.showToast({
						title:"姓名不能为空！",
						icon:'none',
						duration:1000
					})
					return;
				}
				
				if(role == "学生"){
					var sNumber = _this.sNumber;//学号
					if(sNumber == '' || sNumber == null){
						uni.showToast({
							title:"学号不能为空！",
							icon:'none',
							duration:1000
						})
						return;
					}
					
				}
				
				var imgList = _this.imgList;
				if(imgList[0] == "../../static/logo.png"){
					uni.showToast({
						title:"请选择真是头像！",
						icon:'none',
						duration:1000
					})
					return;
				}
				
				_this.isRotate = true; //开启上传动画
				
				var addrImage = "";//上传后的图片地址
				// 上传图片
				 uni.uploadFile({
				            url: _this.api +"upload/postfile", //仅为示例，非真实的接口地址
				            filePath: imgList[0],
				            name: 'file',
				            success: (uploadFileRes) => {
								addrImage = uploadFileRes.data
								//数据上传
								_this.uploadText(role,account,password,sNumber,addrImage,name);
								
				            },
							fail:(err)=>{
								uni.showToast({
									title:"请稍后在试！图片上传失败！",
									duration:1000,
									icon:"none"
								})
							}
							
				        });
				
				
		    },
			
			// 数据上传
			uploadText(authtype,account,password,sNumber,headImg,name){
				console.log(authtype,account,password,sNumber,headImg);
				uni.request({
					url:_this.api + "user/register",
					 data:{
						 authtype:authtype,//角色
						 name:account,//账号
						 password:password,//密码
						 idcard:sNumber,//学号
						 headImg:headImg,//头像
						 userName:name//姓名
					 },
					 header:{
						 "content-type":"application/x-www-form-urlencoded"
					 },
					 method:"POST",
					 success: (res) => {
					 	_this.isRotate = false;//关闭动画并且提示注册成功！
						
						if(res.data.code == "200"){
							uni.showToast({
								title:"注册完成！请登陆",
								icon:"success",
								duration:1000
							})
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							})
						}
						
					
					 },
					 fail: (err) => {
					 	uni.showToast({
					 		title:"注册失败！请稍后在尝试",
					 		icon:"success",
					 		duration:1000
					 	})
					 }
				})
			},
			
			//角色选择
			PickerChange(e) {
				this.role_index = e.detail.value
			},
			
			// 选择图片
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
					}
				});
			},
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>